<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn1">setTimeout</button>
<button class="btn3">clearTimeout</button>
<button class="btn2">setInterval</button>
<button class="btn4">clearInterval</button>
<script>
    let btn1 = document.querySelector(".btn1")
    let btn2 = document.querySelector(".btn2")
    let btn3 = document.querySelector(".btn3")
    let btn4 = document.querySelector(".btn4")
    let t1 = null // setTimeout定时器标识符
    let t2 = null // setInterval定时器标识符
    btn1.addEventListener("click", function () {
        t1 = setTimeout(function () {
            console.log("setTimeout启动")
        }, 5000)
    })
    btn3.addEventListener("click", function () {
        clearTimeout(t1)
    })
    // btn2.addEventListener("click", function () {
    //     t2 = window.setInterval(function () {
    //         console.log("setInterval启动")
    //         console.log("this1:", this)
    //     }, 1000)
    // })
    btn2.addEventListener("click", function () {
        t2 = window.setInterval(() => {
            console.log("setInterval启动")
            console.log("this1:", this)
        }, 1000)
    })

    btn4.addEventListener("click", function () {
        clearInterval(t2)
    })

    // 对象方法：this指向调用该方法的对象
    let obj = {
        name: "why",
        showThis: () => {
            console.log("this3:", this)
        }
    }
    obj.showThis()

</script>

</body>
</html>
